<template>
	<view class="bg min100 plr-52 pt-80 white pb-100" >
		<view class="status_bar">
		</view>
		<image class="logo" src="../../static/home/applogo.jpg" mode=""></image>
		<view class="">
			<view class="mt-100 size-40">
				找回密码
			</view>
			<view class="radius-46 bg-1 mt-60">
				<u-field v-model="phone" :border-bottom="false" label-width="0" placeholder="请输入手机号码"
					placeholder-style="color:#999;font-size:26rpx;">
				</u-field>
			</view>
			<view class="mt-30 radius-46  mt-30  bg-1">
				<u-field v-model="code" :border-bottom="false" label-width="0" placeholder="验证码"
					placeholder-style="color:#999;font-size:26rpx;">
					<view slot="right" class="getBtn ptb-12 plr-16 red" @click="getcode">
						{{vscode}}
					</view>
				</u-field>
			</view>
			<view class="mt-30 radius-46  mt-30  bg-1">
				<u-field v-model="password" :border-bottom="false" label-width="0" placeholder="请设置新的登录密码(8-16位字符，数字字母组合)"
					placeholder-style="color:#999;font-size:26rpx;" type="password">
				</u-field>
			</view>
			<view class="mt-30 radius-46  mt-30  bg-1">
				<u-field v-model="password_re" :border-bottom="false" label-width="0" placeholder="请确认新的登录密码"
					placeholder-style="color:#999;font-size:26rpx;" type="password">
				</u-field>
			</view>
			<u-button type="primary" hover-class="none" class="mt-50 mb-30" style="color: #fff!important;background-color: #44ACFF!important;" @click="toForget">确认修改</u-button>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				password_re: '',
				password: "",
				vscode: '获取验证码',
				countNum: 60,
				countDownTimer: null,
			}
		},
		methods: {
			toUserContent() {
				uni.navigateTo({
					url: './register_content'
				})
			},
			toPrivacy() {
				uni.navigateTo({
					url: "./privacy"
				})
			},
			getcode() {
				// var myreg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
				// if (!myreg.test(this.phone)) {
				// 	uni.showToast({
				// 		title: '请输入手机号码',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none'
					})
					return
				}
				if (this.vscode != "获取验证码" && this.vscode != "重新发送") {
					return
				}
				this.countNum = 60
				this.countDownTimer = setInterval(() => {
					if (this.countNum < 1) {
						clearInterval(this.countDownTimer)
						this.countDownTimer = null
						this.vscode = "重新发送";
						return;
					}
					this.countNum--;
					this.vscode = this.countNum + '秒重发';
				}, 1000)
				this.$http('api/login/sendCode', {
					phone: this.phone,
					type: 2
				}, 'POST').then(data => {
					uni.showToast({
						title: "发送成功",
						icon: 'none'
					})
				}).catch(() => {
					clearInterval(this.countDownTimer)
					this.countDownTimer = null
					this.vscode = "获取验证码";
				})
			},
			toDown() {

			},
			toForget() {
				if (this.phone == '') {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none'
					})
					return;
				}
				if (this.password == '') {
					uni.showToast({
						title: "请输入密码",
						icon: 'none'
					})
					return;
				}
				if (this.code == '') {
					uni.showToast({
						title: "请输入验证码",
						icon: 'none'
					})
					return;
				}
				if (this.password_re == '') {
					uni.showToast({
						title: "请再次输入密码",
						icon: 'none'
					})
					return;
				}
				
				// 忘记密码
				this.$http('api/login/forgetPassword', {
					phone: this.phone,
					password: this.password,
					password_re: this.password_re,
					code: this.code
				}, 'POST').then(res => {
					uni.showToast({
						title: '修改成功'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 500)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.logo {
		width: 296rpx;
		height: 296rpx;
		display: block;
		margin: 10rpx auto 0;
		border-radius: 50%;
	}

	.u-checkbox-group {
		width: 100%;

		::v-deep  .u-checkbox {
			width: 80% !important;
			margin: 0 auto;
			text-align: center;
			font-size: 20rpx;

		}

		::v-deep  .u-checkbox__label {
			color: #999 !important;
		}

		::v-deep  .u-checkbox__label {
			margin-right: 0;
		}

		text {
			color: #44ACFF;
		}
	}

	::v-deep  .u-field {
		color: #333 !important;
	}

	.downBtn {
		background: transparent;
		border: 1px solid #44ACFF;
		color: #44ACFF;
		height: 92rpx;
		width: 650rpx;
		font-size: 32rpx;
		line-height: 92rpx;
	}
</style>
